<template>
    <div class="header-menu-text" @click="go">
        {{menu.label}}
    </div>
</template>
<script>
    export default {
        name: 'header-menu',
        props: {
            menu: {
                type: Object,
                default: () => ({
                    label: ''
                })
            }
        },
        methods: {
            go() {
                this.menu.url ? this.$router.push(this.menu.url) : null
            }
        }
    }
</script>
<style scoped lang="scss">
    .header-menu {
        &-text {
            color: white;
            text-decoration: none;
            padding: 6px 12px;
            font-size: 18px;
            cursor: pointer;

            &:hover {
                color: yellow;
                border-bottom: yellow 2px solid;
            }
        }
    }
</style>